.navbar {
  position: sticky;
  z-index: 100;
  top: var(--docs-header-height);
  height: calc(100vh - var(--docs-header-height));
  flex: 0 0 var(--docs-navbar-width);
  border-inline-end: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
  background-color: var(--mantine-color-body);

  @mixin smaller-than $docs-mdx-breakpoint {
    display: none;
  }
}

.categories {
  padding-inline-end: var(--mantine-spacing-md);

  &:first-of-type {
    padding-top: var(--mantine-spacing-xl);
  }

  &:last-of-type {
    padding-bottom: 80px;
  }

  & + & {
    margin-top: var(--mantine-spacing-xl);
  }
}

.link {
  display: block;
  font-size: var(--mantine-font-size-sm);
  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
  text-decoration: none;
  border-radius: var(--mantine-radius-md);
  padding: 6px 12px;

  @mixin hover {
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
    color: var(--mantine-color-bright);
  }

  &[data-active] {
    color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-blue-2));
    background-color: light-dark(
      var(--mantine-color-blue-0),
      alpha(var(--mantine-color-blue-6), 0.17)
    );
  }

  @mixin smaller-than $docs-mdx-breakpoint {
    font-size: var(--mantine-font-size-md);
    padding: 8px 15px;
  }
}

.category {
  & + & {
    margin-top: var(--mantine-spacing-xl);
  }
}

.categoryTitle {
  padding-inline-start: 12px;
  font-size: var(--mantine-font-size-sm);
  color: var(--mantine-color-bright);
  font-weight: 500;
  margin-bottom: 5px;
  font-family: var(--docs-font-primary);

  @mixin smaller-than $docs-mdx-breakpoint {
    padding-inline-start: 15px;
    font-size: var(--mantine-font-size-lg);
  }
}

.mobileNavbar {
  position: fixed;
  z-index: 100;
  inset: 0;
  top: var(--docs-header-height);
  background-color: var(--mantine-color-body);

  @mixin larger-than $docs-mdx-breakpoint {
    display: none;
  }
}

.mobileNavbarInner {
  padding-inline: var(--mantine-spacing-md);
}
